<template>
    <view class="scroll_view_title flex_c">选择工种</view>
    <scroll-view scroll-y class="scroll_view_container">
        <view class="scroll_view_item flex_b" v-for="(item, index) in workerTypeList" :key="index"
            @click="selectItem(item, index)">
            <view class="scroll_view_item_l">{{ item.label }}</view>
            <view class="scroll_view_item_r">
                <image v-if="index == selectIndex" src="@/static/images/index/icon_select.png" />
                <image v-else src="@/static/images/index/icon_unselect.png" />
            </view>
        </view>
    </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const emit = defineEmits(['selectItem']);
defineProps<{
    workerTypeList: Item[]
}>();


interface Item {
    id: string
    label: string
    value: string
    dictType: string
}

const selectIndex = ref(0);
const selectItem = (item: Item, index: number) => {
    selectIndex.value = index;
    emit('selectItem', item);
}

</script>

<style lang="scss" scoped>
.scroll_view_container {
    width: 100%;
    max-height: 30vh;
    box-sizing: border-box;
}

.scroll_view_title {
    height: 120rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #222222;
    border-bottom: 16rpx solid #F7F8FB;
}

.scroll_view_item {
    height: 96rpx;
    border-bottom: 1rpx solid #F7F8FB;
    padding: 0 24rpx;
    box-sizing: border-box;

    &:nth-last-child(1) {
        border-bottom: none;
    }

    &_l {
        font-size: 28rpx;
        color: #222222;
    }

    &_r {
        width: 40rpx;
        height: 40rpx;

        image {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
        }
    }
}
</style>